<template>
  <div class="container">
    <div class="bottom-tabs">
      <div
        v-for="(item, index) in tabData"
        :key="index"
        :class="{ tab: true, active: activeKey === item.key }"
        @click.stop="updateActive(item.key)"
      >
        <img :src="activeKey === item.key ? item.checkIcon : item.icon" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="placeholder"></div>
  </div>
</template>

<script>
import config from '@/config/index.ts';
const {
  stat: { oldPageId },
} = config;
export default {
  data() {
    return {
      tabData: [
        {
          key: 'Ztgy',
          name: '涨停概要',
          icon: '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/852a3be5-bc43-4a4b-b603-657946f022b9.png',
          checkIcon:
            '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/5df6a165-fac7-4074-b5f2-2160bf9b83ad.png',
        },
        {
          key: 'Ztfp',
          name: '涨停复盘',
          icon: '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/6a21f3ce-1483-4766-ab86-31a8958c1196.png',
          checkIcon:
            '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/6097a552-bb16-4c75-8797-0c65a34406ee.png',
        },
        {
          key: 'Ztjy',
          name: '涨停基因',
          icon: '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/d815ff42-c3f1-4553-9ca1-be19077ab38b.png',
          checkIcon:
            '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/0036d07c-ef26-4613-a614-60ba34aa45aa.png',
        },
        {
          key: 'Ztjk',
          name: '涨停监控',
          icon: '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/d39dc0ef-65f3-497b-87ec-7795f36ccdc4.png',
          checkIcon:
            '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/a056dcd0-2ac6-49c8-8620-eba253923530.png',
        },
      ],
      activeKey: 'Ztgy',
    };
  },
  methods: {
    updateActive(routeName) {
      this.activeKey = routeName;
      const options = {
        Ztgy: 'outline',
        Ztfp: 'replay',
        Ztjy: 'gene',
        Ztjk: 'monitor',
      };
      window.hxmClickStat(`${oldPageId}.${options[routeName]}`);
      this.$emit('navigateTo', routeName);
    },
  },
};
</script>
<style lang="less" scoped>
.bottom-tabs {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100vw;
  height: 100px;
  background: var(--bg-color-2);
  z-index: 12;
  padding-bottom: env(safe-area-inset-bottom);
  .tab {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &.active {
      span {
        color: #ff2436;
      }
    }
    img {
      width: 48px;
      height: 48px;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: var(--text-9);
      text-align: justify;
      font-weight: 400;
      margin-top: 0.02rem;
    }
  }
}
.placeholder {
  width: 100vw;
  height: 100px;
  margin-bottom: env(safe-area-inset-bottom);
}
</style>
